<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock拦截Axios请求-模版</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <h2>F12打开控制台查看数据，效果更佳</h2>

    <div id="Application">

        <h2>调用Mock生成的数据</h2>
        <h4>调用生成的人员数据</h4>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>工作</th>
                <th>ID</th>
            </tr>
            <tr v-for="itm in list" :key="itm.id">
                <th>{{itm.name}}</th>
                <th>{{itm.age}}</th>
                <th>{{itm.job}}</th>
                <th>{{itm.id}}</th>
            </tr>
        </table>
    </div>
    <script>






        const App = Vue.createApp({
            setup() {

                //拦截Axios
                Mock.mock('/api/sign/out', 'get', {
                    status: 200,
                    message: 'success',
                    data: {
                        total: 100,
                        'rows|10': [{
                            id: '@guid',
                            name: '@cname',
                            'age|20-30': 23,
                            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                        }]
                    }
                });
                Mock.setup({
                    timeout: '200-600'
                })



                let list = Vue.ref("");
                // 请求代码如下
                axios.get('/api/sign/out')
                    .then((response) => {
                        console.log(response.data.data.rows, "拿到的值");
                        //拿到数据
                        list.value = response.data.data.rows;
                    })

                //展示数据
                console.table(list);


                return { list }
            }
        })

        App.mount("#Application")
    </script>
</body>

</html>